import { Form as AntdForm, Col, Input, Row, TreeDataNode } from "antd";
import React, { FC, useContext, useEffect, useMemo } from "react";
import { CommonComponentProps } from "@/pages/lowCodeEditorPlus/interface";
import { useMaterialDrop } from "@/pages/lowCodeEditorPlus/hooks/useMaterialDrop";
import { useDrag } from "react-dnd";
import HoverMask from "@/pages/lowCodeEditorPlus/components/EditArea/HoverMask";
import { ContainerEmpty } from "@/pages/lowCodeEditorPlus/materialItems/common-components/ContainerEmpty";
import { accept } from "./setter";
import { LowCodePageContext } from '@/pages/lowCodeEditorPlus/contextProvider/LowCodePageProvider';
import { cloneDeep } from "lodash-es";
const Form: FC<CommonComponentProps> = ({ id, name, children, onFinish, containerUnitType, layout, gutter, alias, desc }) => {
  const [form] = AntdForm.useForm();

  const { canDrop, drop } = useMaterialDrop(accept.body, id);

  const [_, drag] = useDrag({
    type: name,
    item: {
      type: name,
      dragType: "move",
      id: id,
      containerUnitType,
    },
  });

  const formItems = useMemo(() => {
    return React.Children.map(children, (item: any) => {
      return {
        label: item.props?.label,
        name: item.props?.name,
        type: item.props?.type,
        id: item.props?.id,
        span: item.props?.span,
      };
    });
  }, [children]);

  useEffect(()=>{
    getComponentProperties(children)
  },[children])
  
  const { setContextProperties } = useContext(LowCodePageContext);
  function getComponentProperties(children: React.ReactNode){
    const arr = [] as TreeDataNode[]
    React.Children.map(children, (item: any) => {
      const { label, name} = item?.props || {};
      arr.push({
        title: label,
        key: `form.${name}`
      })
    })
    const rowObj={
      title: `${alias}[${desc}]`,
      key: "Form",
      disabled: true,
      parentId: id,
      children:arr
    }
    setContextProperties(id, rowObj)
  }

  return (
    <div className={`w-full min-h-6`} ref={node => drop(drag(node))} data-component-id={id} data-component-unit-type="body">
      <AntdForm
        // labelCol={{ span: 6 }}
        // wrapperCol={{ span: 18 }}
        form={form}
        onFinish={values => {
          onFinish && onFinish(values);
        }}
        layout={layout}
      >
        {formItems.length > 0 ? (
          <Row gutter={gutter}>
            {formItems.map((item: any) => {
              return (
                <Col span={item.span} key={item.name}>
                  <AntdForm.Item data-component-id={item.id} name={item.name} label={item.label}>
                    <Input style={{ pointerEvents: "none" }} />
                  </AntdForm.Item>
                </Col>
              );
            })}
          </Row>
        ) : (
          <ContainerEmpty desc="请添加表单项" />
        )}
      </AntdForm>

      {id && canDrop && (
        <HoverMask portalWrapperClassName="portal-wrapper" containerClassName="edit-area" componentId={id} />
      )}
    </div>
  );
};

export default Form;
